<template>
  <el-dropdown v-if="linkExtensions.length>0 || hasMdCode">
    <span class="el-dropdown-link">
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu @click="editMd(fvData.fdLayout.mdCode)" v-if="hasMdCode">查看主数据{{fvData.fdLayout.mdCode}}
      </el-dropdown-menu>
      <template linkExtensions.length>0>
      <el-dropdown-menu>
        <el-dropdown-item :key = "index" @click="editLink(linkExtension)" v-for="(linkExtension,index) in linkExtensions">linkExtension.description</el-dropdown-item>
      </el-dropdown-menu>
      </template>
    </template>
  </el-dropdown>
</template>
<script>
import { ArrowDown } from '@element-plus/icons-vue'
import nvsDataUtils from '../../js/NvsDataUtils'
import { ref, onMounted, getCurrentInstance, computed } from 'vue';
import ConstDef from '../../js/ConstDef'
import layoutUtils from '../../js/layout/LayoutUtils'
import cacheManage from '../../cache/CacheManage'
export default {
  name: 'LinkDropdown',
  components: {
    ArrowDown
  },
  props: {
    fvData: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    const linkExtensions = ref([]);
    const currentInstance = getCurrentInstance();
    onMounted(() => {
      const fdLayout = props.fvData.fdLayout;
      const extensions = nvsDataUtils.getFdLayoutExtension(fdLayout, ConstDef.FD_LAYOUT_EXTENSION_LINK);
      const result = [];
      for (const extension of extensions) {
        result.push(JSON.parse(extension.json));
      }
      linkExtensions.value = result;
    });
    const hasMdCode = computed(() => {
      if (props.fvData != null && props.fvData.fdLayout != null && props.fvData.fdLayout.mdCode) return true; else return false;
    });

    function getPlatform() {
      let parent = currentInstance.parent;
      while (parent != null) {
        if (parent.type.name === "PlatformConsole") { break; }
        parent = parent.parent;
      }
      return parent.proxy;
    }

    async function editMd (mdCode) {
      const md = await cacheManage.getMd(mdCode);
      if (!md) return;
      const ndCode = md.__ndCode;
      const layoutCode = await layoutUtils.getLayoutCodeByKey(ndCode);
      if (!layoutCode) return;
      const codeFdName = "code";
      edit(ndCode, layoutCode, codeFdName, mdCode);
    }

    function editLink (linkExtension) {
      const fvData = props.fvData;
      const code = fvData.getValue();
      const codeFdName = linkExtension.codeFdName;
      const ndCode = linkExtension.ndCode;
      const layoutCode = linkExtension.layoutCode;
      edit(ndCode, layoutCode, codeFdName, code);
    }

    function edit(ndCode, layoutCode, codeFdName, code) {
      const tabPage = {
        name: "object view",
        title: "对象查看",
        moduleCode: ConstDef.MODULE_CODE_ENTRY,
        config: {
          nvId: 0,
          nvCode: code,
          codeFdName: codeFdName,
          ndCode: ndCode,
          layoutCode: layoutCode,
          action: 'query'
        }
      };
      const platform = getPlatform();
      platform.onTabPage(tabPage);
    }
    return {
      linkExtensions,
      editLink,
      editMd,
      hasMdCode
    }
  }
}
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
</style>
